<template>
  <div class="contain">
    <img class="bg" src="@/assets/bg.jpg" width="100%" height="100%" />
    <div class="avator">
      <img src="@/assets/avator.png" mode="widthFix" width="100px" />
      <p v-if="isLogin === true" style="font-size: 20px; color: #a9e2f3; font-weight: bold">
        USERLOGIN
      </p>
      <p v-if="isLogin === false" style="font-size: 20px; color: #a9e2f3; font-weight: bold">
        REGISTER
      </p>
    </div>
    <!-- 登录 -->
    <div class="login" v-if="isLogin === true">
      <van-form @submit="onSubmit">
        <van-field v-model="username" name="用户名" label="用户名" placeholder="请输入账号" autocomplete />
        <van-field v-model="password" type="password" name="密码" label="密码" placeholder="请输入密码" autocomplete />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit" size="large" color="blue"
            v-if="log_loading === false" @click="onSubmit(username, password)" :disabled="!canSubmit">登录</van-button>
          <van-loading v-if="log_loading === true" color="#1989fa" text-color="#1989fa">正在登陆...</van-loading>
          <p>没有账号/忘记密码 <span @click="isLogin = false">点这里</span></p>
        </div>
      </van-form>
    </div>
    <!-- 注册 -->
    <div class="register" v-if="isLogin === false">
      <van-form>
        <van-field v-model="phone" name="用户名" label="用户名" placeholder="请输入账号" />
        <van-field v-model="sms" name="验证码" label="验证码" placeholder="请输入验证码">
          <template #button>
            <van-button v-if="hasSend" size="small" type="warning " disabled>{{ time }}s</van-button>
            <van-button v-else size="small" type="primary" @click="sendCode(phone)" :disabled="!canSendCode">发送验证码
            </van-button>
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit" size="large" color="blue"
            v-if="reg_loading === false" @click="handleReg(phone, sms)" :disabled="!canReg">注册</van-button>
          <van-loading v-if="reg_loading === true" color="#1989fa" text-color="#1989fa">正在注册...</van-loading>
          <p>已有账号 <span @click="isLogin = true">去登录</span></p>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {
      log_loading: false,
      reg_loading: false,
      hasSend: false,
      time: 60,
      username: "",
      password: "",
      phone: "",
      sms: "",
      isLogin: true,
    };
  },
  computed: {
    canSubmit() {
      return Boolean(this.username && this.password);
    },
    canReg() {
      return Boolean(this.phone && this.sms);
    },
    canSendCode() {
      return Boolean(this.phone);
    }
  },
  methods: {
    ...mapMutations(["SET_USER_INFO"]),
    onSubmit(username, password) {
      this.log_loading = true;
      this.$axios
        .post(`/users/login?username=${username}&&password=${password}`)
        .then((res) => {
          if (res.code === 200 || res.code === "200") {
            if (!localStorage.getItem("userID")) {
              localStorage.setItem("userID", res.data.userID);
              localStorage.setItem("username", res.data.username);
              localStorage.setItem("avator", res.data.avator);
              localStorage.setItem("token", res.token);
              localStorage.setItem("school", res.data.school);
              localStorage.setItem("nickname", res.data.nickname);
              localStorage.setItem("certified", res.data.certified);
            }
            this.SET_USER_INFO(res.data);
            this.$router.replace("/moment");
          }
          this.log_loading = false;
        });
    },
    // 注册
    handleReg(phone, sms) {
      this.reg_loading = true;
      this.$axios
        .post(`/users/codePhoneLogin?phone=${phone}&&code=${sms}`)
        .then((res) => {
          if (res.code === 200) {
            localStorage.setItem("userID", res.data.userID);
            localStorage.setItem("username", res.data.username);
            localStorage.setItem("avator", res.data.avator);
            localStorage.setItem("token", res.token);
            localStorage.setItem("school", res.data.school);
            localStorage.setItem("nickname", res.data.nickname);
            localStorage.setItem("certified", res.data.certified);
            this.SET_USER_INFO(res.data);
            console.log("res", res);
            this.$router.replace("/moment");
          }
          this.reg_loading = false;
        });
    },
    // 发送验证码
    sendCode(phone) {
      this.$axios.post(`/users/sendCode?phone=${phone}`).then((res) => {
        console.log("验证码", res);
      });
      this.hasSend = true
      let timer = setInterval(() => {
        this.time--
        if (this.time === 0) {
          clearInterval(timer)
          this.hasSend = false
          this.time = 60
        }
      }, 1000)
    },
  },
};
</script>

<style scoped>
.contain {
  width: 100vw;
  height: 100vh;
}

.bg {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(10px);
}

.avator {
  padding: 50px;
}

.van-cell {
  border-radius: 10px;
  margin-top: 5px;
  opacity: 0.8;
}

p span {
  color: #a9e2f3;
}
</style>